<template>
	<view class="base-input" :style="inputStyle">
		<slot name="prefix"/>
		<editor id="editor" class="ql-container" 
		 style="padding: 20rpx;height: 160rpx;min-height: 160rpx;background-color: #dadbde;" :placeholder="placeholder"
		     @input="parseContentFun"
			 @ready="onEditorReady">
		</editor>
		<slot name="suffix"/>
	</view>
</template>

<script>
export default {
	name: "BaseInput",
	props: {
		value: {
			type: String,
			default: ""
		},
		inputStyle: {
			type: Object,
			default: () =>{ 
				return {'width': '100%', 'height': '60px'}
			}
		},
		emoji: {
			type: Object,
			default: () => ({})
		},
		placeholder: {
			type: String,
			default: ""
		}
	},
	watch: {
		emoji(val){
			if(!val || JSON.stringify(val) == "{}") return;
			if(!val.src || !val.name){
				throw "The emoji parameter is incomplete";
				return
			}
			this.insertImg(val);
			this.$emit("update:emoji", {});
		}
	},
	data() {
		return {
			hideKeyboardTime:null,
		};
	},
	mounted() {
		if(this.hideKeyboardTime){
				clearInterval(this.hideKeyboardTime);
				this.hideKeyboardTime = null								
		}
	},
	//实例销毁
	beforeDestroy() {
		if(this.hideKeyboardTime){
				clearInterval(this.hideKeyboardTime);
				this.hideKeyboardTime = null								
		}
	},
	methods: {
		hideKeyboardMain(){
				this.hideKeyboardTime = setInterval(function() {
					uni.hideKeyboard(); //隐藏软键盘  
					console.log(111111111111111111111111)
				}, 10);
		},
		onEditorReady() {
			this.createSelectorQuery().select('#editor').context((res) => {
				this.editorCtx = res.context
			}).exec()
		},
		insertImg(emoji) {
			this.hideKeyboardMain()  //其他没用，主要是这句启用定时器
			this.editorCtx.blur();
			this.editorCtx.insertImage({
				src: emoji.src,
				width: '20px',
				height: '20px',
				extClass: 'emoji',
				data: {
					name: emoji.name
				}
			})
			this.editorCtx.blur();
		},
		parseContentFun(e) {
			if(this.hideKeyboardTime){
					clearInterval(this.hideKeyboardTime);
					this.hideKeyboardTime = null								
			}
			this.getContent();
		},
		getContent() {
			this.editorCtx.getContents({
				success: (res) => {
					this.$emit("input", this.parseHtml(res.html))
				}
			})
		},
		/**
		 * 解析富文本内容
		 * @param {Object} html 富文本内容
		 */
		parseHtml(html) {
			// 1、对img表情进行解析，解析出表情对应的name
			let reg = /<img[\S\s]*?>/g;
			let imgList = html.match(reg);
			html = this.parseEmojiName(html, imgList);
			// 2、解析用户手动输入的标签文本
			html = this.parseInTab(html);
			// 3、解析富文本自带标签p
			html = this.parseDefaultTab(html);
			return html;
		},
		parseEmojiName(html, emojiList) {
			try{
				for (const imgStr of emojiList) {
					let name = imgStr.match(/name=[\S\s]*\]/)[0];
					name = name.replace("name=", "");
					html = html.replace(imgStr, name);
				}
			} catch {}
			return html;
		},
		/**
		 * 对用户输入的标签文本进行解析
		 * @param {Object} html
		 */
		parseInTab(html) {
			html = html.replace("&lt;", "<");
			html = html.replace("&gt;", ">");
			return html;
		},
		/**
		 * 解析富文本编辑器默认标签，p标签
		 * @param {Object} html
		 */
		parseDefaultTab(html) {
			html = html.replace("<p>", "");
			html = html.replace("</p>", "\n");
			html = html.replace("<br>", "");
			html = html.substring(0, html.lastIndexOf("\n"));
			return html;
		}
	},
};
</script>

<style lang='scss' scoped>
.base-input {
	display: flex;
	align-items: center;
	padding: 5px 0;

	::v-deep p {
		display: flex;
		align-items: center;
		height: 25px;
	}

	.ql-container {
		display: block;
		height: 100%;
		min-height: 100%;
		padding: 0 5px;
		margin-right: 5px;
		border: 1px solid #ececec;
		outline: none;
		box-sizing: border-box;
		border-radius: 16rpx;

		::v-deep .ql-blank:before {
			font-style: initial;
			top: 50%;
			transform: translateY(-50%);
		}
	}
}
</style>

